<template>
	<view class="bg-grey">
		<!-- 头部 -->
		<yHeader :current="5" :screenWidth="screenWidth" @Tabs="handleTabs" class="bg-white"></yHeader>
		<!-- pv端内容 -->
		<view v-if="SizeChange.width > 480" class="__inner">
			<view class="zx-head bg-white">
				<view class="left">
					<view class="news-left">
						<image v-if="Domestic_list.length != 0" :src="Domain_IMG + Domestic_list[0]['Picture_URL']"
							mode="scaleToFill" class="img1" @click="handleTabs('/pages/index/news?id=' + Domestic_list[0].News_SerialNumber)" />
						<view class="left-bottom">
							<image v-if="International_list.length != 0"
								:src="Domain_IMG + International_list[1]['Picture_URL']" mode="scaleToFill" @click="
                  handleTabs('/pages/index/news?id=' +International_list[1].News_SerialNumber )" />
							<image v-if="International_list.length != 0"
								:src="Domain_IMG + International_list[2]['Picture_URL']" mode="scaleToFill" @click="
                  handleTabs('/pages/index/news?id=' +International_list[2].News_SerialNumber)" />
						</view>
					</view>
					<view class="news-right">
						<view class="item">
							<view class="sTitle">国内资讯</view>
							<view class="nr">
								<view v-for="(item, index) in Domestic_list.slice(0, 5)" :key="index" @click="
                    handleTabs('/pages/index/news?id=' + item.News_SerialNumber)
                  ">
									<view class="domestic hover" :class="{ 'font-weight-bold font-lg': index === 0 }">
										{{ item.News_Name }}
									</view>
								</view>
							</view>
						</view>
						<view class="item mt-2">
							<view class="sTitle">国际资讯</view>
							<view class="nr">
								<view v-for="(item, index) in International_list.slice(0, 5)" :key="index" @click="
                    handleTabs('/pages/index/news?id=' + item.News_SerialNumber)
                  ">
									<view class="domestic hover" :class="{ 'font-weight-bold font-lg': index === 0 }">
										{{ item.News_Name }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="news-right">
						<view class="item">
							<view class="sTitle">企业销售top榜</view>
							<view class="nr">
								<view class="qyitem hover" v-for="(item, index) in companyNameList" :key="index" @click="
                    handleTabs(
                      '/pages/detail/enterprise-detail?id=' +
                        item.Enterprise_Info_SerialNumber
                    )
                  ">
									<image :src="Domain_Business + item.Enterprise_Logo" mode="scaleToFill" />
									<view>
										<view>{{ item.Enterprise_Name }}</view>
										<view>销售额: {{ item.Amount }}元</view>
									</view>
									<view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="Product_Display p-2 bg-white">
				<view class="PD-left">
					<view class="prediction">
						<view class="sTitle">价格走势图</view>
						<view class="cont p-2 mt-2">
							<view style="width: 100%; height: 600rpx">
								<qiun-data-charts type="area" :opts="opts" :chartData="chartData"
									style="height: 600rpx" />
							</view>
						</view>
					</view>
					<view class="demonstration">
						<view class="sTitle">木耳产业技术</view>
						<view class="demonstrationList">
							<view class="item hover" @click="handleTabs('/pages/index/news?id=N00000000000007')">
								<view class="title text-success"> 木耳基质 </view>
								<view class="itemCont">以黑木耳为例，种植时可以选择适宜的基质，如木屑或麦麸，并进行消毒处理...</view>
							</view>
						</view>
					</view>
					<view class="demonstration">
						<view class="sTitle" style="margin-top: 0">最新农业资讯</view>
						<view class="demonstrationList">
							<view v-for="(item, index) in news" :key="index" class="item hover"
								@click="handleTabs2(index)">
								<view class="title text-success">{{ item.title }}</view>
								<view style="text-indent: 1rem">
									{{ item.Main_ellipsis }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="PD-right">
					<view class="mb-2 number">
						<view class="sTitle"> 销售数据 </view>
						<view class="bg-white flex flex-column" style="width: 100%; height: 900rpx">
							<view class="mx-4 mb-4" style="height: 100%">
								<view class="flex" style="height: 20%">
									<view class="flex flex-column justify-center border-right border-grey box"
										style="width: 40%; height: 100%">
										<view class="">
											<text class="font">正在出售</text>
										</view>
										<view class="">
											<text class="h2">{{ Supply.total }}</text>
										</view>
									</view>
									<view class="pl-4 flex flex-column justify-center" style="width: 40%; height: 100%">
										<view class="">
											<text class="font">已售金额</text>
										</view>
										<view class="">
											<text class="h2">{{ Number(Supply.Amount) }}</text>
										</view>
									</view>
								</view>
								<view class="" style="height: 80%">
									<view class="flex align-center" style="height: 10%">
										<text class="font-md">最新上架</text>
									</view>
									<view class="flex flex-column" style="height: 90%">
										<view class="flex border-bottom border-grey box"
											style="width: 100%; height: 15%">
											<view class="flex align-center" style="width: 33.3%">
												<text class="font">销售品种</text>
											</view>
											<view class="flex justify-center align-center" style="width: 33.3%">
												<text class="font">销售价格</text>
											</view>
											<view class="flex justify-end align-center" style="width: 33.3%">
												<text class="font">上架时间</text>
											</view>
										</view>
										<view class="flex flex-column justify-start supplyDatalist"
											style="width: 100%; height: 85%">
											<view v-for="(item, index) in tableData" :key="index" class="flex tabls"
												style="width: 100%; height: 10%" @click="
                          handleTabs(
                            '/pages/detail/supply-detail?id=' +
                              item.Group_Purchasing_SerialNumber
                          )
                        ">
												<view class="flex justify-start align-center hover"
													style="width: 33.3%">
													<text class="font">{{
                            item.Category_Name
                          }}</text>
												</view>
												<view class="flex justify-center align-center hand"
													style="width: 33.3%">
													<text class="font">{{ item.Amount }}元/{{ item.Unit }}</text>
												</view>
												<view class="flex justify-end align-center hand" style="width: 33.3%">
													<text class="font">{{
                            timeAgo(item.Delivery_Time)
                          }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--手机  -->
		<view v-else class="center mb-3">
			<view class="w-100 py-4">
				<image style="object-fit: cover; height: 300rpx" class="w-100" src="../../static/icon/consult.png"
					mode="">
				</image>
			</view>
			<view class="flex justify-between flex-column mb-3" style="">
				<view class="bg-white p-2 mb-2" v-for="(item, index) in 3" :key="index">
					<view class="flex justify-between align-center pb-2" style="border-bottom: 2rpx dashed #bbb">
						<view class="flex justify-between align-center" style="width: 50%">
							<text class="font-weight-bold font-lg">价格指数</text>
							<text>木耳</text>
							<text>菌类</text>
						</view>
						<view class="hoversss flex font-sm" style="height: 40rpx; line-height: 50rpx">
							<text>指数中心&gt;</text>
							<!-- <uni-icons size="15" type="right"></uni-icons> -->
						</view>
					</view>
					<view class="pt-4 font-sm px-2">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<text>市场报价:</text>
								<view class="flex">
									<view @click="SelectActive(i)" v-for="(item, i) in 4" :key="i" :class="
                      active == i
                        ? 'active' + ' ' + 'bg-' + ThemeColors
                        : 'hover'
                    " class="p-1 ml-2 font-sm" style="border-radius: 10rpx">
										港口
									</view>
								</view>
							</view>
							<text class="font-sm" style="color: #bbb">日更新</text>
						</view>
						<view class="flex align-center justify-between mt-1">
							<view class="flex align-center">
								<text>本平台成交价:</text>
								<view class="flex">
									<view class="p-1 ml-2 font-sm" :class="'bg-' + ThemeColors + ' ' + 'text-white'"
										style="border-radius: 10rpx">
										全国
									</view>
								</view>
							</view>
							<text class="font-sm" style="color: #bbb">实时更新</text>
						</view>
					</view>
					<!-- 表格 -->
					<view class="mt-2 font-sm">
						<view class="flex justify-center">
							<view style="width: 20%" class="text-center">地区</view>
							<view style="width: 25%" class="text-center">价格类型</view>
							<view style="width: 25%" class="text-center">价格(元/吨)</view>
							<view style="width: 15%" class="text-center">涨跌</view>
							<view style="width: 15%" class="text-center">日期</view>
						</view>
						<view class="flex flex-column mt-2 justify-between" style="height: 350rpx">
							<view v-for="(item, i) in 5" :key="i" class="flex align-center"
								style="position: relative; justify-content: space-evenly">
								<view style="width: 20%" class="text-center font-md tag1">锦州港</view>
								<view style="width: 25%; color: #aaa" class="text-center">主流粮成交价</view>
								<view style="width: 25%; color: rgb(111, 111, 111)"
									class="text-center font-lg font-weight-bold">2570
								</view>
								<view style="width: 15%; color: #aaa" class="text-center">持平</view>
								<view style="width: 15%" class="text-center">11/03</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between flex-column mt-2">
				<view class="bg-white p-2 mb-3" style="height: 420rpx">
					<view class="flex justify-between align-center pb-2" style="border-bottom: 2rpx dashed #bbb">
						<view class="flex justify-between align-center" style="width: 50%">
							<text class="font-weight-bold font-lg">分析预测</text>
						</view>
						<view class="flex font-sm hoversss" style="height: 40rpx; line-height: 50rpx">
							<text>更多&gt;</text>
							<!-- <uni-icons size="15" type="right"></uni-icons> -->
						</view>
					</view>
					<view class="flex flex-column" style="
              height: 350rpx;
              justify-content: space-evenly;
              font-size: 28rpx;
            ">
						<view style="position: relative; color: rgb(120, 120, 120)"
							class="flex align-center justify-between px-4" v-for="(item, index) in 5" :key="index">
							<view class="text-ellipsis" style="width: 80%">
								<text style="transition: all 0.5s" class="tag hoverss">东北木耳持续涨价,盘面六连涨,后期价格还能涨吗?</text>
							</view>
							<text style="color: #bbb">11/03</text>
						</view>
					</view>
				</view>
				<view class="bg-white p-2 mb-3" style="height: 420rpx">
					<view class="flex justify-between align-center pb-2" style="border-bottom: 2rpx dashed #bbb">
						<view class="flex justify-between align-center" style="width: 50%">
							<text class="font-weight-bold font-lg">指数工具箱</text>
						</view>
					</view>
					<view class="flex align-center p-4" style="flex-wrap: wrap">
						<view v-for="(item, i) in FootImageData" :key="i"
							class="hovers flex justify-center align-center" style="width: 49%; height: 150rpx">
							<view class="flex align-center">
								<image style="width: 80rpx" :src="item.src" mode="widthFix"></image>
								<text class="ml-3">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<yFooter Show v-if="screenWidth > 480" :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import yTable from "@/components/yTable.vue";
	import {
		NewsAll
	} from "@/api/information.js";
	import {
		GroupProcureAll,
		GroupProcureAllAction,
		GroupProcureStatistics,
		GroupMarketQuotations
	} from "@/api/group.js";
	import {
		GoodsFileInquiry,
		GetRedis
	} from "@/api/global.js";
	import {
		getEnterpriseSalesRanking
	} from "@/api/information.js";
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				tableData: [],
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_Business: app.globalData.Domain_Business,
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				SizeChange: {
					height: "",
					width: "",
				},
				Product_information: {
					region: "秋木耳",
					unit: "吨",
				},
				supplyData: [],
				opts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow",
						},
					},
				},
				name: "[请登录]",
				active: 0,
				actives: "",
				hover: "",
				hovers: "",
				chartData: {},
				Domestic_list: [],
				International_list: [],
				form: {
					News_Type: "1", //type 默认空是全部
					Row_Status: "1", //状态
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				supplyForm: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				},
				companyNameList: [],
				Variety_List: [],
				news: [{
					title: "",
					Main: [],
				}, ],
				Supply: {}, //统计
				Purchase: {}, //统计
			};
		},
		onShow() {
			window.addEventListener("resize", this.getSize());
			this.getNewsData();
		},
		computed: {
			timeAgo() {
				return function(date) {
					const seconds = Math.floor((new Date() - new Date(date)) / 1000);
					const intervals = {
						年: 31536000,
						月: 2592000,
						周: 604800,
						天: 86400,
						小时: 3600,
						分钟: 60,
						秒: 1,
					};
					for (let interval in intervals) {
						const count = Math.floor(seconds / intervals[interval]);
						if (count > 0) {
							return count + " " + interval + "前";
						}
					}
					return "刚刚";
				};
			},
		},
		methods: {
			//统计
			async statistics() {
				const res4 = await GroupProcureStatistics({
					data: {},
				});
				if (res4.redirect && res4.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
				} else if (res4.Status == "success") {
					this.Supply = res4.Supply;
					this.Purchase = res4.Purchase;
				}
			},

			async EnterpriseSalesRankingMethods() {
				const res = await getEnterpriseSalesRanking({
					data: {
						page: 1,
						limit: 5,
					},
				});
				this.companyNameList = res.Data;
			},
			async getNewsData() {
				const res = await GetRedis({
					data: {
						Key: "zjl_reptile",
					},
				});
				if (res.Status == "success") {
					this.news = res.Data;
				}
			},
			async getData(data) {
				//分页查询所有供应数据
				const res = await GroupProcureAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupProcureAll({
						data,
					});
					if (res.Status == "success") {
						this.tableData = res.tableData;
					}
				} else if (res.Status == "success") {
					this.tableData = res.tableData;
				}
			},

			async getList() {
				//类别
				const res = await GoodsFileInquiry({
					data: {
						Data: "category",
					},
				});
				this.Variety_List = res;
			},
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleTabs2(index) {
				uni.navigateTo({
					url: "/pages/index/CrawlersNews?id=" + index,
				});
			},
			mouseenter(i) {
				this.actives = i;
				this.hover = "text-decoration: underline;";
				this.hovers = "text-" + this.ThemeColors;
			},
			mouseleave(i) {
				this.actives = -1;
			},
			getSize() {
				this.SizeChange.width = window.screen.width;
			},
			async getServerData() {
				const res = await GroupMarketQuotations({
					data: {
						chart:true
					},
				});
				console.log(res);
				let categories = [];
				for (let i = 1; i < 13; i++) {
				    categories.push(i+'月');
				}
				let res1 = {
				    categories,
				    series: res.Data,
				};
				this.chartData = JSON.parse(JSON.stringify(res1));
			},
			async Domestic(i) {
				this.form.News_Type = i;
				const res = await NewsAll({
					data: this.form,
				});
				this.Domestic_list = res.tableData;
			},

			async international(i) {
				this.form.News_Type = i;
				const res = await NewsAll({
					data: this.form,
				});
				console.log(res);
				this.International_list = res.tableData;
			},
		},
		onReady() {
			this.getServerData();
			this.Domestic("2");
			this.international("3");
			this.getList();
			this.getData(this.supplyForm);
			this.EnterpriseSalesRankingMethods();
			this.statistics();
		},
	};
</script>

<style lang="scss" scoped>
	.Product_Display {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.PD-left {
			width: 1560rpx;
			box-sizing: border-box;
			padding: 0 40rpx 0;

			.demonstration {
				.demonstrationList {
					padding: 0 20rpx;
					box-sizing: border-box;

					.item {
						margin: 30rpx 0;

						.title {
							font-size: 40rpx;
							margin: 10rpx 0;
						}

						.itemCont {
							// padding-left:0 0 0 20px;
							padding: 0 0 0 20rpx;
							box-sizing: border-box;
						}
					}
				}

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.prediction {
				.cont {
					box-sizing: border-box;

					.item {
						display: flex;
						align-items: center;

						text {
							display: inline-block;
							margin: 0 0 0 10rpx;
						}
					}

					.dian {
						height: 1px;
						border: 3px solid #000;
						border-radius: 50%;
						// padding: -px;
					}
				}
			}
		}

		.PD-right {
			width: 720rpx;

			.supplyDatalist {
				display: flex;
			}
		}
	}

	.sTitle {
		height: 34px;
		background-color: #fff;
		line-height: 30px;
		background-image: url();
		background-repeat: no-repeat;
		background-position: 0px 5px;
		background-size: 4px auto;
		position: relative;
		padding-left: 20rpx;
		border-bottom: 1px solid #dddddd;
		font-weight: bold;
		font-size: 45rpx;
	}

	.zx-head {
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left {
			width: 1520rpx;
			display: flex;
			justify-content: space-between;

			.news-left {
				width: 840rpx;

				.img1 {
					width: 100%;
					height: 426rpx;
				}

				.left-bottom {
					margin-top: 10px;
					display: flex;
					justify-content: space-between;

					image {
						width: 205px;
						height: 147px;
					}
				}
			}

			.news-right {
				width: 640rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.item {
					font-size: 28rpx;

					.nr {
						padding: 10rpx 0 0 20rpx;

						view {
							margin: 0 0 10rpx 0;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}
		}

		.right {
			display: flex;

			.news-right {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.item {
					font-size: 28rpx;

					.nr {
						padding: 10rpx 0 0 20rpx;

						.domestic:hover {
							color: #28a745;
							text-decoration: underline;
						}

						.qyitem {
							margin: 0 0 15rpx 0;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							display: flex;
							align-items: center;
							border-bottom: 1px solid #dddddd;
							padding: 10rpx;
							box-sizing: border-box;

							image {
								width: 100rpx;
								height: 100rpx;
								margin: 0 10rpx 0 0;
							}
						}
					}
				}
			}
		}
	}

	.p-big {
		padding: 0 225rpx;
	}

	.getPages {
		background-color: #fc7c08;
		color: #fff;
	}

	page {
		background-color: #faf8fb;
	}

	.bgc {
		background-color: #ffffff;
		cursor: pointer;
	}

	.header-right {
		margin-left: 30rpx;
	}

	.header text {
		margin-right: 20rpx;
	}

	.logo-nav .text {
		padding: 0 50px;
		font-size: 30rpx;
	}

	.jiaoyi text {
		display: block;
		width: 300rpx;
		height: 50rpx;
	}

	.active {
		color: #ffffff;
	}

	.hover:hover {
		cursor: pointer;
		transition: all 0.5s;
	}

	.tag::before {
		content: "·";
		font-size: 40rpx;
		font-weight: bold;
		color: #fc7c08;
		position: absolute;
		bottom: -10rpx;
		left: 18rpx;
	}

	.tag1::before {
		content: "·";
		font-size: 40rpx;
		font-weight: bold;
		color: #fc7c08;
		position: absolute;
		bottom: -5rpx;
		left: 0rpx;
	}

	.hovers:hover {
		background-color: rgb(244, 244, 244);
		transition: all 0.5s;
		cursor: pointer;
	}

	.hoverss:hover {
		color: #000;
	}

	.hoversss:hover {
		background-color: rgb(244, 244, 244);
		border-radius: 20rpx;
		transition: all 0.5s;
		transform: translateX(10rpx);
		cursor: pointer;
	}

	.hover:hover {
		color: #28a745;
		text-decoration: underline;
	}
</style>